import React, {  } from 'react'
import { Table, Button } from 'antd';


export default function MyTable(props) {

  const { changeStatus,modifyGoods,history,list,searchList } =props

  const columns = [
    {
      title: '商品名称',
      dataIndex: 'name',
      key: 'name',
      width:'20%',
    },
    {
      title: '商品描述',
      dataIndex: 'desc',
      key: 'info',
      width:'55%',
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
      align:'center',
      width:'10%',
      render:text=>'￥'+text
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      width:'10%',
      align:'center',
      render: (status, record, index) => (
        <>
          <Button type='primary' onClick={()=>changeStatus(record)}>{status?'下架':'上架'}</Button>
          <p>{status?'在售':'已下架'}</p>
        </>
      ),
    },
    {
      title: '操作',
      key: 'action',
      width:'5%',
      align:'center',
      render: (text, record) => (
        <>
          <Button type='link' onClick={()=>history.push('/product/detail',record)}>详情</Button>
          <Button type='link' onClick={()=>modifyGoods(record)}>修改</Button>
        </>
      ),
    },
  ];

  return (
    <div className='product-table'>
      <Table columns={columns} dataSource={searchList.length===0?list:searchList} bordered rowKey='_id' loading={list.length===0}/>
    </div>
  )
}
